<!-- 
 使用例子：
 <pb-time-line 
 :list="dataSource" 
 keyTitle="visit_time"
 keySubTitle="dept_name"
 activeColor="red" 
 :activeIndex="1" 
 ></pb-time-line>
  
 复杂使用：
 <pb-time-line
 :list="dataSource"  
 :openValidator="getChildData"
 >
	<template v-slot:pointIcon="{item,index}">
		
	</template>
	<template v-slot:title="{item,index}">
		
	</template>
	<template v-slot:subTitle="{item,index}">
		
	</template>
 </pb-time-line>
 
 //加载子节点数据（subTitle节点内容如果需要再调用接口获取的使用openValidator方法）
 async getChildData(item) {
 	let flag = false
 	//接口调用获取节点数据
 	await xxxxx({}).then(res => {
		this.$set(item,'子节点字段名称',res.data)
 		flag = true
 	}).catch(error => {
 		flag = false
 	})
 	return flag
 },
-->
<!-- 
  推荐使用'pb-time-line-single'组件，可以实现一样的功能
  原因：（基本都是小程序平台对插槽使用的限制）
  1、'pb-time-line'组件为v-for循环渲染插槽，小程序中不推荐这样使用，而且还有性能问题
  2、使用了作用域插槽，数据只在作用域内有效（父组件只能使用作用域插槽提供的数据进行数据渲染） 
  -->
<template>
	<view>
		<view class="pb-time-line pb-flex-column" :style="styleStr" v-for="(item,index) in listTemp" :key="index">
			<view class="pb-flex-row pb-cross-stretch" @click="foldAction(item,index)">
				<view class="line-content pb-flex-column pb-cross-center">
					<!-- 顶部线条 -->
					<template v-if="lineOpen(index,-1)">
						<text class="line pb-expanded"
							:style="'background-color:'+lineColr+';'+(isActiveNode(index,-1)?activeBGColor:'')"></text>
					</template>
					<template v-else>
						<text class="line none pb-expanded"></text>
					</template>

					<!-- icon图标 -->
					<slot :item="item" :index="index" :isActive="isActiveNode(index,0)" :tempData="tempData"
						name="pointIcon">
						<text class="circle" :style="isActiveNode(index,0)?activeBGColor:''"></text>
					</slot>


					<!-- 底部线条 -->
					<template v-if="lineOpen(index,0)">
						<text class="line pb-expanded"
							:style="'background-color:'+lineColr+';'+(isActiveNode(index,0)?activeBGColor:'')"></text>
					</template>
					<template v-else>
						<text class="line none pb-expanded"></text>
					</template>

				</view>

				<view class="pb-expanded" :style="titleStyleStr+(isActiveNode(index,0)?activeColorTemp:'')">
					<slot :item="item" :index="index" name="title" :isActive="isActiveNode(index,0)"
						:tempData="tempData">
						<text>{{item[keyTitle]}}</text>
					</slot>
				</view>

			</view>
			<view class="pb-flex-row">
				<!-- 中间线条 -->
				<view class="line-content pb-flex-column pb-cross-center">
					<template v-if="lineOpen(index,0)">
						<text class="line pb-expanded"
							:style="'background-color:'+lineColr+';'+(isActiveNode(index,0)?activeBGColor:'')"></text>
					</template>
					<template v-else>
						<text class="line none pb-expanded"></text>
					</template>
				</view>
				<view v-if="open(item)" class="pb-expanded"
					:style="subTitleStyleStr+(isActiveNode(index,0)?activeColorTemp:'')">
					<slot :item="item" :index="index" name="subTitle" :tempData="tempData">
						<text>{{item[keySubTitle]}}</text>
					</slot>
				</view>
			</view>
			<view v-if="!open(item)" style="height: 24rpx;background-color: transparent;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pb-time-line",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			keyTitle: {
				type: String,
				default: 'title'
			},
			keySubTitle: {
				type: String,
				default: 'subTitle'
			},
			defaultOpen: {
				type: Boolean,
				default: true,
			},
			enableFold: {
				type: Boolean,
				default: false,
			},
			//激活节点组件的索引值 （哪个激活就变色activeColor）
			activeIndex: {
				type: Number,
			},
			activeColor: {
				type: String,
			},
			titleStyle: {
				type: [String, Object],
				default: () => {
					return {
						"font-size": "32rpx",
						"line-height": "48rpx",
						"color": "var(--text-main)"
					}
				}
			},
			subTitleStyle: {
				type: [String, Object],
				default: () => {
					return {
						"font-size": "28rpx",
						"line-height": "44rpx",
						"color": "var(--text-auxiliary)"
					}
				}
			},
			lineColr: {
				type: String,
				default: 'rgba(0, 0, 0, 0.1)'
			},
			bgColor: {
				type: String,
				default: "#FFF"
			},
			//可选参数（异步加载subTitle节点数据）
			openValidator: {
				type: Function,
			},
			//数据暂存，组件中不使用
			//（作用域插槽的数据隔离，所以作用域插槽在使用中只能访问子组件作用域内的数据（小程序））
			tempData: {
				type: [String, Object, Array, Number],
			},
		},
		data() {
			return {
				styleStr: '',
				subTitleStyleStr: '',
				activeColorTemp: '',
				activeBGColor: '',
				listTemp: null,
			};
		},
		watch: {
			list: {
				handler(newVal) {
					newVal.forEach(item => {
						if (item.timeLineOpen == undefined) {
							item.timeLineOpen = this.enableFold ? this.defaultOpen : true
							this.$set(item, 'timeLineOpen', item.timeLineOpen)
						}
					})
					this.listTemp = newVal
				},
				immediate: true,
				deep: true
			},
			titleStyle: {
				handler(newVal) {
					if (newVal instanceof Object) {
						this.titleStyleStr = uni.$u.addStyle(newVal, 'string')
					} else {
						this.titleStyleStr = newVal
					}
				},
				immediate: true
			},
			subTitleStyle: {
				handler(newVal) {
					if (newVal instanceof Object) {
						this.subTitleStyleStr = uni.$u.addStyle(newVal, 'string')
					} else {
						this.subTitleStyleStr = newVal
					}
				},
				immediate: true
			},
			activeColor: {
				handler(newVal) {
					if (newVal) {
						this.activeColorTemp = `color:${newVal};`
						this.activeBGColor = `background-color:${newVal};`
					}
				},
				immediate: true
			},
			bgColor: {
				handler(newVal) {
					let style = {
						"background-color": newVal,
					}
					this.styleStr = uni.$u.addStyle(style, 'string')
				},
				immediate: true
			}
		},
		methods: {
			//open状态,-1:上一节点 0：当前节点 1：下一节点
			lineOpen(index, offset) {
				//第一个节点顶部线条不需要展示、最后一个节点底部线条和中间线条不需要展示
				if ((index + offset) < 0 || (index + offset) == (this.listTemp.length - 1)) {
					return false
				}
				if (!this.enableFold) {
					return true
				}
				let item = this.listTemp[index + offset]
				return item.timeLineOpen
			},
			//是否是激活节点 -1:上一节点 0：当前节点 1：下一节点
			isActiveNode(index, offset) {
				if ((index + offset) < 0) {
					if (index == this.activeIndex) {
						return true
					}
					return false
				}
				if ((index + offset) == this.activeIndex) {
					return true
				}
				return false
			},
			open(item) {
				if (!this.enableFold) {
					return true
				}
				if (item.timeLineOpen == undefined) {
					item.timeLineOpen = this.defaultOpen
					this.$set(item, 'timeLineOpen', item.timeLineOpen)
				}
				return item.timeLineOpen
			},
			async foldAction(item) {
				if (!this.enableFold) {
					return
				}
				if (item.timeLineOpen == false && this.openValidator && typeof(this.openValidator) === 'function') {
					var flag = await this.openValidator.call(uni.$u.$parent.call(this), item)
					if (!flag) {
						//未获取到节点数据
						console.log('【pb-time-line】open :获取节点数据失败')
						return
					}
				}

				item.timeLineOpen = !item.timeLineOpen
				this.$set(item, 'timeLineOpen', item.timeLineOpen)
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pb-time-line {
		.line-content {
			width: 50rpx;
			flex-shrink: 0;

			.circle {
				width: 20rpx;
				height: 20rpx;
				border-radius: 100%;
				background-color: $uni-border-color;
			}

			.line {
				width: 2rpx;
				height: 100%;

				&.none {
					width: 0;
				}
			}
		}
	}
</style>